<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <link rel="stylesheet" href="../css/index_1.css">
    <link rel="stylesheet" href="../css/base.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        form {
            margin-bottom: 20px;
        }
        textarea {
            width: 100%;
            height: 100px;
        }
        .messages {
            list-style-type: none;
            padding: 0;
        }
        .message {
            background: #f0f0f0;
            border: 1px solid #ccc;
            margin-bottom: 10px;
            padding: 10px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="wrapper">
            <div class="logo">
                <a href="#"></a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a href="home.html">首页</a>
                    </li>
                    <li>
                        <a href="musictype.html">分类查询</a>
                    </li>
                </ul>
            </div>
            <div class="search">
                <input type="text" placeholder="请输入关键字">
                <a href="#"></a>
            </div>
            <div class="user">
                <a href="#">
                    <img src="./uploads/user.png" alt="#">
                    <span>卖报的小行家</span>
                </a>
            </div>
        </div>
      </div>
    <div class="message-container" style="width: 1200px;margin: 30px auto;">
        <h1>留言板</h1>
        <form id="messageForm">
            <textarea id="messageInput" placeholder="在这里留下你的留言..."></textarea><br>
            <button type="submit">提交留言</button>
        </form>
        <table id="messageTable">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>用户</th>
                    <th>发表时间</th>
                    <th>建议</th>
                </tr>
            </thead>
            <tbody id="tableBody">
            </tbody>
        </table>
        <a href="home.html" style="float: right;">返回主页>></a>
    </div>
    <div class="footer">
        <div class="wrapper">
            <div class="left">
                <a href="#">
                    <img src="../images/log.png" alt="">
                </a>
                <p>
                    这是一个练习型的网站，就是分享作者的一些音乐分享。
                    音乐肯定是不全的，后续可以继续加内容。
                    如果有什么建议，可以点击下面按钮，给我留言。
                    若有违规音乐，请给我留言，届时下架。
                </p>
                <a href="#" class="give-me-advise">给我留言</a>
            </div>
            <div class="right">
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">就我一个</a></dd>
                    <dd><a href="#">就我一个</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <script src="../js/axios.min.js"></script>

    <script>
        getAdiviseList()

        function getAdiviseList() {
            axios({
                url:`http://localhost:8080/advise`,
                method:"get",
            }).then(result=>{
                const advises = result.data.data
                console.log(advises); 
                let index = 1

                const tableBody = document.getElementById('tableBody');
                tableBody.innerHTML = '';

                advises.forEach(advise=>{
                    let row = document.createElement('tr')
                    row.innerHTML = `<tr>
                        <td style="width:45px">${index}</td>
                        <td style="width:120px">${advise.user}</td>
                        <td style="width:160px">${advise.sendTime}</td>
                        <td>${advise.advise}</td>
                    </tr>`
                    tableBody.appendChild(row)
                    index++
                })
            })
        }
        // 获取表单和留言列表
        var messageForm = document.getElementById('messageForm');
        var messageInput = document.getElementById('messageInput');
        var messagesList = document.getElementById('messages');

        // 监听表单提交事件
        messageForm.addEventListener('submit', function(event) {
            event.preventDefault();
            // 获取输入的留言内容
            var messageText = messageInput.value.trim();
            const data = {
                "advise":messageText,
                "user":localStorage.getItem("username")
            }
            axios({
                url:`http://localhost:8080/advise`,
                method:"post",
                data
            }).then(result=>{
                const data = result.data.data 
                console.log(data);
                messageInput.value = ''
                getAdiviseList()
            })
        });
    </script>
</body>
</html>